<template>
	<div class="echarts-box card-box">
		<h1>收集整理项目中出现的echarts方便以后开发使用(可在原基础上快速进行二次开发)</h1>
		<div class="maxbox">
			<div class="chartbox">
				<AreaChart></AreaChart>
			</div>
			<div class="chartbox">
				<LineChart></LineChart>
			</div>
			<div class="chartbox">
				<VariedLineChart></VariedLineChart>
			</div>
		</div>
		<div class="maxbox">
			<div class="chartbox">
				<MeterChart></MeterChart>
			</div>
			<div class="chartbox">
				<PieChart></PieChart>
			</div>
			<div class="chartbox">
				<BarChart></BarChart>
			</div>
		</div>
		<div class="maxbox">
			<div class="chartbox">
				<TrendChart></TrendChart>
			</div>
			<div class="chartbox">
				<GradientBarChart></GradientBarChart>
			</div>
			<div class="chartbox">
				<RadarChart></RadarChart>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
import AreaChart from "@/components/Echarts/AreaChart.vue";
import LineChart from "@/components/Echarts/LineChart.vue";
import VariedLineChart from "@/components/Echarts/VariedLineChart.vue";
import MeterChart from "@/components/Echarts/MeterChart.vue";
import PieChart from "@/components/Echarts/PieChart.vue";
import BarChart from "@/components/Echarts/BarChart.vue";
import TrendChart from "@/components/Echarts/TrendChart.vue";
import GradientBarChart from "@/components/Echarts/GradientBarChart.vue";
import RadarChart from "@/components/Echarts/RadarChart.vue";
import * as echarts from 'echarts';


onMounted(() => {
	//getData();
});


// 离开页面后请销毁echarts
onBeforeUnmount(() => {
});
</script>

<style lang="scss">
.echarts-box {
	width: 100%;

	.maxbox {
		display: flex;
		width: 98%;
		background-color: #1f1b17;
		justify-content: space-between;
		justify-content: center;

		.chartbox {
			width: 32%;
			height: 300px;
		}


	}

	.echarts-box-card {
		width: 100%;
		min-height: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		border-radius: 4px;
		border: 1px solid #e4e7ed;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
		box-sizing: border-box;
		padding: 20px 0px;
		overflow: hidden;
	}

	// .echarts-main {
	// 	width: 100%;
	// 	min-width: 500px;
	// 	height: 300px;
	// }
}
</style>
